<template>
    <div>
        <el-form ref="ruleFormRef" :model="form" :rules="rules" class="form-box" size="large" label-width="120px">
            <el-form-item prop="username" label="标题">
                <el-input v-model="form.username" placeholder="请输入园区名称" />
            </el-form-item>
            <el-form-item prop="mobile" label="封面图">
                <el-input v-model="form.mobile" placeholder="请输入园区服务"><template #append>%</template></el-input>
            </el-form-item>
            <el-form-item prop="mobile" label="内容">
                <el-input v-model="form.mobile" placeholder="请输入园区服务费"><template #append>%</template></el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="cancle(ruleFormRef)">取 消</el-button>
                <el-button type="primary" @click="ok(ruleFormRef)">确 认</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup>
import {reactive, ref, onMounted} from 'vue'
import {useRoute, useRouter} from 'vue-router'
import api from './api/index'
import {successDeal, setStore, removeStore} from '@/utils/utils'
import {regionData, CodeToText, TextToCode} from 'element-china-area-data'

const areaSelectData = regionData
const form = reactive({
    username: '',
    mobile: '',
    password: '',
    level: 1,
    city: '',
})

const rules = reactive({
    username: [{required: true, message: '请输入用户姓名', trigger: 'blur'}],
    mobile: [
        {required: true, message: '请输入手机号码', trigger: 'blur'},
        {
            pattern: /^1[3|4|5|6|7|8|9]\d{9}$/,
            message: '手机号格式错误',
            trigger: 'change',
        },
    ],
    password: [{required: true, message: '请输入登录密码', trigger: 'blur'}],
    level: [{required: true, message: '请选择用户等级', trigger: 'change'}],
})

const ruleFormRef = ref()
const ok = (formEl) => {
    formEl.validate((valid, fields) => {
        if (valid) {
            api.addUser(form).then((res) => {
                successDeal('新增用户成功！')
                $router.push('/userMangment')
            })
        } else {
            console.log('error submit!', fields)
        }
    })
}

const handleChange = (options) => {
    console.log(options)

    console.log(CodeToText[options[0]])
}
const $router = useRouter()
const cancle = () => {
    $router.go(-1)
}
</script>

<style lang="scss" scoped>
.form-box {
    width: 50%;
}
</style>
